<mat-card class="page-title">
    <span>模型超市</span>

    <div class="btn-toolbar float-right" role="toolbar" id="divDesktop">
        <button mat-icon-button (click)="refresh()" matTooltip="刷新">
            <mat-icon color="primary">refresh</mat-icon>
        </button>
        <span>&nbsp;&nbsp;</span>
        <input name="search" type="text" class="form-control" placeholder="全文搜索" [(ngModel)]="filter"
               (blur)="refresh()" style="width:200px">

        <span>&nbsp;&nbsp;</span>

        <mat-button-toggle-group #viewStyleGroup="matButtonToggleGroup" value="module">
            <mat-button-toggle value="module"  matTooltip="模块视图">
                <mat-icon color="primary" *ngIf="viewStyleGroup.value === 'module'">view_module</mat-icon>
                <mat-icon *ngIf="viewStyleGroup.value !== 'module'">view_module</mat-icon>
            </mat-button-toggle>
            <mat-button-toggle value="list" matTooltip="列表视图">
                <mat-icon color="primary" *ngIf="viewStyleGroup.value === 'list'">view_list</mat-icon>
                <mat-icon *ngIf="viewStyleGroup.value !== 'list'">view_list</mat-icon>
            </mat-button-toggle>
        </mat-button-toggle-group>
    </div>
</mat-card>

<mat-card class="search-condition-card">
    <div>
        <span >检索条件：</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <mat-form-field >
            <input matInput type="text" placeholder="作者" [(ngModel)]="searchAuthorLogin" (blur)="refresh()">
        </mat-form-field>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <mat-form-field >
            <input matInput type="text" placeholder="单位" [(ngModel)]="searchCompany" (blur)="refresh()">
        </mat-form-field>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <mat-form-field >
            <input matInput type="text" placeholder="名称" [(ngModel)]="searchName" (blur)="refresh()">
        </mat-form-field>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <mat-form-field >
            <input matInput type="text" placeholder="关键字" [(ngModel)]="searchTag" (blur)="refresh()">
        </mat-form-field>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <mat-form-field >
            <mat-select placeholder="模型类别" [(ngModel)]="searchModelType" (selectionChange)="refresh()">
                <mat-option value="all">
                    全部
                </mat-option>
                <mat-option value="预测">
                    预测
                </mat-option>
                <mat-option value="分类">
                    分类
                </mat-option>
                <mat-option value="回归">
                    回归
                </mat-option>
            </mat-select>
        </mat-form-field>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <mat-form-field >
            <mat-select placeholder="模型工具" [(ngModel)]="searchToolkitType" (selectionChange)="refresh()">
                <mat-option value="all">
                    全部
                </mat-option>
                <mat-option value="TensorFlow">
                    TensorFlow
                </mat-option>
                <mat-option value="Keras">
                    Keras
                </mat-option>
                <mat-option value="Scikit-Learn">
                    Scikit-Learn
                </mat-option>
                <mat-option value="H2O">
                    H2O
                </mat-option>
                <mat-option value="模型组合">
                    模型组合
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <div>
        <span >模型排序：</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <mat-form-field >
            <mat-select placeholder="排序字段" [(ngModel)]="predicate" (selectionChange)="refresh()">
                <mat-option value="displayOrder">
                    默认
                </mat-option>
                <mat-option value="name">
                    模型名称
                </mat-option>
                <mat-option value="authorLogin">
                    作者
                </mat-option>
                <mat-option value="company">
                    单位
                </mat-option>
                <mat-option value="createdDate">
                    日期
                </mat-option>
                <mat-option value="modelType">
                    模型类别
                </mat-option>
                <mat-option value="toolkitType">
                    模型工具
                </mat-option>
                <mat-option value="viewCount">
                    浏览量
                </mat-option>
                <mat-option value="downloadCount">
                    下载量
                </mat-option>
                <mat-option value="commentCount">
                    评论数
                </mat-option>
                <mat-option value="ratingCount">
                    点评数
                </mat-option>
                <mat-option value="ratingAverage">
                    点评星级
                </mat-option>
            </mat-select>
        </mat-form-field>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <mat-radio-group [(ngModel)]="reverse" (change)="refresh()">
            <mat-radio-button [value]="true" color="primary">升序</mat-radio-button>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <mat-radio-button [value]="false" color="primary">降序</mat-radio-button>
        </mat-radio-group>
    </div>

</mat-card>

<mat-card>
    <div *ngIf="viewStyleGroup.value === 'list'">
        <div class="table-responsive">
            <table class="table">
                <thead>
                <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="transition.bind(this)">
                    <th><span>uuid</span></th>
                    <th jhiSortBy="name"><span>模型名称</span> <span class="fa fa-sort"></span></th>
                    <th jhiSortBy="authorLogin"><span>作者</span> <span class="fa fa-sort"></span></th>
                    <th jhiSortBy="createdDate"><span>日期</span> <span class="fa fa-sort"></span></th>
                    <th jhiSortBy="modelType"><span>模型类别</span> <span class="fa fa-sort"></span></th>
                    <th jhiSortBy="toolkitType"><span>模型工具</span> <span class="fa fa-sort"></span></th>
                    <th jhiSortBy="viewCount"><span>浏览量</span> <span class="fa fa-sort"></span></th>
                    <th jhiSortBy="downloadCount"><span>下载量</span> <span class="fa fa-sort"></span></th>
                    <th jhiSortBy="commentCount"><span>评论数</span> <span class="fa fa-sort"></span></th>
                    <th jhiSortBy="ratingCount"><span>点评数</span> <span class="fa fa-sort"></span></th>
                    <th jhiSortBy="ratingAverage"><span>点评星级</span> <span class="fa fa-sort"></span></th>
                </tr>
                </thead>
                <tbody *ngIf="solutions">
                    <tr *ngFor="let solution of solutions; trackBy: trackIdentity">
                        <td>{{solution.uuid}}</td>
                        <td><a (click)="viewSolution(solution)">{{solution.name}}</a></td>
                        <td>{{solution.authorLogin}}</td>
                        <td>{{solution.createdDate | date:'yyyy-MM-dd'}}</td>
                        <td>{{solution.modelType}}</td>
                        <td>{{solution.toolkitType}}</td>
                        <td>{{solution.viewCount}}</td>
                        <td>{{solution.downloadCount}}</td>
                        <td>{{solution.commentCount}}</td>
                        <td>{{solution.ratingCount}}</td>
                        <td>{{solution.ratingAverage}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row" *ngIf="viewStyleGroup.value === 'module'">
        <div *ngFor="let solution of solutions; trackBy: trackIdentity">
            <mat-card class="solution-card pull-right">
                <mat-card-header class="solution-card-header">
                    <mat-card-title class="solution-card-title">
                        {{solution.name}}
                        <div class="pull-right" *ngIf="false">
                            <a matTooltip="删除"><span>x</span></a>
                        </div>
                    </mat-card-title>
                    <mat-card-subtitle>
                        <span>{{solution.company || solution.authorName || solution.authorLogin}}</span>
                        <div class="pull-right">
                            <span>{{solution.createdDate | date:'yyyy-MM-dd'}}</span>
                        </div>
                    </mat-card-subtitle>
                </mat-card-header>
                <div class="solution-card-image">
                    <a (click)="viewSolution(solution)">
                        <img mat-card-image src="{{solution.pictureUrl}}" *ngIf="solution.pictureUrl">
                        <img mat-card-image src="../../../content/images/solution/default.jpg" *ngIf="!solution.pictureUrl">
                    </a>

                </div>
                <mat-card-content class="solution-card-content">
                    <span class="fa fa-star-o" matTooltip="点评数">{{solution.ratingCount}}</span>
                    <div class="star-bg pull-right" matTooltip="点评星级：{{solution.ratingAverage}}">
                        <div class="star-over" [ngStyle]="{'width': getRatingWidth(solution.ratingAverage)}"></div>
                    </div>
                    <div style="margin-top: 2px">
                        <span class="fa fa-eye" matTooltip="浏览量">{{solution.viewCount}}</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span class="fa fa-download" matTooltip="下载量">{{solution.downloadCount}}</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="fa fa-commenting-o" matTooltip="评论数">{{solution.commentCount}}</span>
                        <div class="pull-right" matTooltip="收藏">
                            <a *ngIf="isMyFavorite(solution)" (click)="toggleFavorite(solution)">
                                <span class="fa fa-heart icon-inline"></span>
                            </a>
                            <a *ngIf="!isMyFavorite(solution)" (click)="toggleFavorite(solution)">
                                <span class="fa fa-heart-o"></span>
                            </a>
                        </div>
                    </div>
                </mat-card-content>
            </mat-card>
        </div>
    </div>
    <br>
    <div>
        <mat-paginator #paginator
                       [length]="totalItems"
                       [pageSize]="itemsPerPage"
                       [pageSizeOptions]="pageSizeOptions"
                       (page)="reloadPage($event)"
                       showFirstLastButtons>
        </mat-paginator>
    </div>
</mat-card>
